@include('Home.head')



<style>

	.head-style{

		background-color: whitesmoke;

	}

	.p3{

		font-family: "Lucida Console";

	}

	.imageh{

		height: 183px;

		width: 100%;

		border-radius: 10px 10px 10px 10px;

	}



	.goodlist{

		border-radius: 10px;

		height: auto;

		border: #FFFFFF 2px solid;

		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.05);

	}

	.textc{

		/* text-align: center; */

	}

	.headera{

		/* border-bottom:#F2F2F2 2px solid; */

		background-color: white;
	}

	.op{
		color: orangered;
		font-weight: 600;
		padding-left: 4px;
		font-size: 10px;
		border: none;
	}

	.goods_class{

		width: 24%;

		display: inline-block;

		padding: 0px 20px;

		margin: 8px -1px;

	}

	.el-input__inner{

		border-radius: 20px 0px 0px 20px;

	}



	.el-input-group__append{

		border-radius: 0px 20px 20px 0px;

	}

	.goods_class{

		width: 15%;

		display: inline-block;

		padding: 0px 0px;

		margin: 8px 0px 0px 12px;

	}

	input::-webkit-input-placeholder{

		text-align: center;

	}

	.el-carousel__container{

		height: 160px;

	}

	.goods_class1{

		width: 24%;

		display: inline-block;

		padding: 0px 20px;

		margin: 0px 2px;

	}

	.sxy-footer .am-navbar-nav{

		background-color: #fff;

		box-shadow: 0 1px 4px 0 rgba(34,31,31,.2);

	}

	.title{
		font-size: 17px;
	}
	.el-input__inner{
		background-color: #eeeeee;
	}

	.el-button--default{
		background-color: #CC3436;
	}
	.am-navbar-nav a .am-navbar-label{
		font-size: 14px;
		margin-top: 6px;
	}
	.am-navbar{
		height: 60px;
	}
	.cart{
		background: linear-gradient(0deg,#ff6e29 0%, #ff911d 100%);
		border-radius: 8.5px;
		color: #ffffff;
		font-size: 16px;
		padding-left: 6px;
		padding-right: 6px;
		margin-top: 10px;
		margin-right: 10px;
		margin-bottom: 6px;
	}
	.product-buyer-name{
		padding-left: 6px;
	}
</style>



<body style="overflow-x: hidden">



<div class="container" id="app">



{{--	<header data-am-widget="header" class="head-style am-header am-header-default my-header headera" >--}}





{{--		<h1 class="am-header-title">--}}



{{--			<a href="#title-link" class="title" style="color:black;">商城</a>--}}



{{--		</h1>--}}





{{--	</header>--}}

	<div style="margin: 15px;">

		<el-input v-model="keyword"  placeholder="请输入搜索关键字">

			<el-button slot="append" icon="am-icon-search" v-on:click="search()"></el-button>

		</el-input>

	</div>

	<!-- banner -->



	<div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{&quot;directionNav&quot;:false}' style="border-radius: 10px;margin-left: 15px;margin-right: 15px;">



		<el-carousel indicator-position="none" style="border-bottom:#F2F2F2 2px solid;">

			<el-carousel-item v-for="(item,index) in imagelist" :key="index" style="border-bottom:#F2F2F2 2px solid;border-radius: 10px;">

				<a >

					<img :src="item.banner_img" width="100%" height="100%">

				</a>

			</el-carousel-item>

		</el-carousel>

	</div>



	<div style="margin: 15px;border-radius: 20px;">

		<div style="border-radius: 20px;">
			<div class="goods_class">

				<li @click="jump3()" style="text-align: center;">

					<img style="border-radius: 50%;width: 29pt;height: 29pt;" src="/img/home/ping.png" />

					<p style="width: 100%;text-align: center;font-size: 12px;">新人</p>

				</li>

			</div>

			<div class="goods_class" >

				<li @click="fjump2()" style="text-align: center;">

					<img style="border-radius: 50%;width: 29pt;height: 29pt;" src="/img/home/baopin.png" />

					<p style="width: 100%;text-align: center;font-size: 12px;">复购</p>

				</li>

			</div>
			<div class="goods_class">

				<li @click="jump33()" style="text-align: center;">

					<img style="border-radius: 50%;width: 29pt;height: 29pt;" src="/img/home/fu.png" />

					<p style="width: 100%;text-align: center;font-size: 12px;">供应链</p>

				</li>

			</div>
			{{--			<div class="goods_class">--}}

			{{--				<li @click="jumpf()" style="text-align: center;">--}}

			{{--					<img style="border-radius: 50%;width: 29pt;height: 29pt;" src="/img/home/fu.png" />--}}

			{{--					<p style="width: 100%;text-align: center;font-size: 12px;">复投</p>--}}

			{{--				</li>--}}

			{{--			</div>--}}
			<div class="goods_class">

				<li @click="jump2()" style="text-align: center;">

					<img style="border-radius: 50%;width: 29pt;height: 29pt;" src="/img/home/futou.png" />

					<p style="width: 100%;text-align: center;font-size: 12px;">推客</p>

				</li>

			</div>
			<div class="goods_class">

				<li @click="jump4()" style="text-align: center;">
					{{--				<li @click="" style="text-align: center;">--}}

					<img style="border-radius: 50%;width: 29pt;height: 29pt;" src="/img/home/jianjie.png" />

					<p style="width: 100%;text-align: center;font-size: 12px;">特价</p>

				</li>

			</div>
		</div>

		<div @click="classGood(item.id)" v-for="item in classify"  class="goods_class1" style="width: 46%;height: 86px;padding-top: 15px;background: linear-gradient(#FFECF2FF, #FFFFFFFF);margin-left: 10px;border-radius: 10px;">

			<div style="float: left;width: 50%;">

						<span style="float: left;width: 40px;

		height: 16px;

		font-size: 16px;

		font-family: Source Han Sans CN;

		font-weight: bold;

		line-height: 27px;

		color: #333333;

		opacity: 1;">@{{item.name}}</span></br>

				<p style="width: 50px;

		height: 10px;

		font-size: 10px;

		font-family: Source Han Sans CN;

		font-weight: 400;

		line-height: 17px;

		color: #333333;

		opacity: 0.7;">@{{item.details}}</p>

			</div>

			<div style="float: right;width: 50%">

				<img style="width: 60px;height: 66px;float: right;" :src="item.thumb"  />

			</div>

		</div>

		{{--		<div style="width: 100%;height: 206px;margin-bottom: 15px;border-radius: 10px">--}}

		{{--			<img style="width: 76px;height: 24px;margin-top: 8px;margin-bottom: 8px;" src="/img/home/new_man.png" />--}}
		{{--			<div style="margin-bottom: 8px;">优质的产品彰显不一样的品质</div>--}}
		{{--			<div style="width: 100%;height: 200px;background: #FFf;opacity: 1;padding: 0px;border: 3px solid #e4e7ed">--}}
		{{--				     <li @click="jump(item.id)"  style="text-align: center;width: 100%;height: 155px;display:inline-block;white-space: nowrap; " v-for="item in goods1">--}}
		{{--						 <img :src="item.goods_thumb" style="width: 100%;height: 100%;border-radius: 6px;"/>--}}
		{{--						 <span class="list-product-price-span2" style="font-weight: 600;padding-left: 0px;border: none;line-height: 40px">￥@{{item.rulingprice}}</span>--}}
		{{--						 <span class="list-product-price-span2" style="text-decoration:line-through;color: gray;font-weight: 300;padding-left: 0px;border: none;line-height: 40px">￥@{{ item.originalprice }}</span>--}}
		{{--						 <span class="cart" style="float: right;">立即购买</span>--}}

		{{--					 </li>--}}



		{{--			</div>--}}

		{{--		</div>--}}



	</div>

	<br>

	<div  style="width: 100%;height: 30px;margin-left: 15px;margin-right: 15px;">


		<img style="width: 76px;height: 24px;margin-bottom: 8px;" src="/img/home/fugou.png" />

	</div>



	<div id="d1" class="am-cf am-g">



		<ul class="am-avg-sm-2 my-shop-product-list">



			<li v-for="val in goodsList">



				<div class="am-panel am-panel-default goodlist"   v-on:click="jump1(val.id)">



					<div class="am-panel-bd">
						<img class="am-img-responsive imageh" :src="val.goods_thumb" />
						<h3 class="p3 product-buyer-name"><a href="#" style="font-weight: 600;">@{{ val.goodsname }}</a></h3>
						<div>
							<span class="list-product-price-span2" style="font-weight: 550;padding-left: 0px;border: none;font-size: 13px">运营师价￥@{{ val.rulingprice }}</span>
							<span class="list-product-price-span2" style="font-weight: 300;padding-left: 0px;border: none;font-size: 11px;color: grey;text-decoration: line-through">原价￥@{{ val.originalprice }}</span>
						</div>
						<div>

							<span class="list-product-price-span2 op" v-show="val.pk_integral !='0'">PV值：@{{ val.pk_integral }}</span>
{{--							<span class="list-product-price-span2 op" v-show="val.is_explosive !='0.00'">e+积分：@{{ val.is_explosive }}</span>--}}
							<div style="clear: both"></div>
							<span class="cart" style="float: right;">立即购买</span>
							<div style="clear: both"></div>
						</div>

					</div>



				</div>



			</li>



		</ul>



	</div>

	<li class="layui-flow-more" v-if="loading">加载中</li>

	<li class="layui-flow-more" v-if="loading==false">没有更多了</li>



	<footer data-am-widget="navbar" class="am-navbar am-cf sxy-footer" id="">

		<ul class="am-navbar-nav am-cf am-avg-sm-4">

			<li>

				<a href="/home/excellent/index" class="">

					<img src="/img/home/menu_home_r.png" alt="首页"/>

					<span class="am-navbar-label">首页</span>

				</a>

			</li>

			<li>

				<a href="/home/index/resale_goods" class="">

					<img src="/img/home/menu_futou.png" alt="折扣" />

					<span class="am-navbar-label">折扣</span>

				</a>

			</li>

			<li>

				<a href="/home/index/sort_detail?cid=1" class="">



					<img src="/img/home/menu_tejia.png" alt="平价"/>

					<span class="am-navbar-label">注册</span>

				</a>

			</li>

			<li>

				<a href="/home/member/index" class="footer-active">

					<img src="/img/home/menu_mine.png" alt="我的"/>

					<span class="am-navbar-label">我的</span>

				</a>

			</li>

		</ul>

	</footer>



</div>



</body>



<script>



	var app = new Vue({



		el:"#app",



		data: {

			goodsList : [],

			goods:[],

			goods1:[],

			imagelist:[],

			rotation:[],

			keyword:'',

			classify:{},

			page: '', //总页数

			nowPage: 2, //本页

			loading: false, //异步加载时的限制

			bottomHight: 50, //滚动条到某个位置才触发时间

			val:0

		},



		//事件



		methods: {



			classify1:function () {



				//获取商品数据



				$.post("/home/index/index_classify",{'_token':'{{csrf_token()}}',class:'select'},function (res) {



					if(res.code == 1){

						app.classify = res.data;

						console.log(app.classify)

					} else if(res.code == 0) {

						layer.msg(res.data);

					}



				});



			},

			imglist:function () {

				$.post("/home/index/banner",{'_token':'{{csrf_token()}}',class:'select'},function (res) {

					if(res.code == 1){

						app.imagelist = res.data;

					} else if(res.code == 0) {

						layer.msg(res.data);

					}

				});



			},

			initialize:function () {



				//获取商品数据



				$.post("/home/index/getShopGoods ",{'_token':'{{csrf_token()}}',class:'select',two_tid:0},function (res) {



					if(res.code == 1){

						console.log(res.data)

						app.goodsList = res.data;

						app.page = res.data.last_page;

						app.nowPage = res.data.current_page;



						if (res.data.length > 3) {

							for (var i = 0; i < 3; i++) {

								var datas = {

									goods_thumb: '',

									gid: 0

								};

								datas.goods_thumb = app.goodsList[i].goods_thumb;

								datas.gid = app.goodsList[0].id;

								app.rotation.push(datas);

							}

						}else{

							for (var i = 0; i < res.data.length; i++) {

								var datas = {

									goods_thumb: '',

									gid: 0

								};

								datas.goods_thumb = app.goodsList[i].goods_thumb;

								datas.gid = app.goodsList[0].id;

								app.rotation.push(datas);

							}

						}



					} else {



						layer.msg(res.data);



					}



				});



				{{--$.post("/home/index/resale", {'_token': '{{csrf_token()}}',class:'select',two_tid:0}, function (res) {--}}

				{{--              // console.log(res)--}}

				{{--              if (res.code == 1) {--}}

				{{--				app.goods = res.data;--}}

				{{--              } else {--}}

				{{--                 layer.msg(res.data);--}}

				{{--              }--}}

				{{--          });--}}

				$.post("/home/index/newborn", {'_token': '{{csrf_token()}}',class:'select',two_tid:0}, function (res) {

					// console.log(res)

					if (res.code == 1) {

						app.goods1 = res.data;

					} else {

						layer.msg(res.data);

					}

				});



			},



			handleScroll: function () {

				var rico = this

				// console.log(app.type);

				if (getScrollBottomHeight() <= app.bottomHight && app.nowPage < app.page && app.loading ==

						false) {

					app.loading = true;

					$.get("/home/index/classify", {

						'_token': '{{csrf_token()}}',

						class: 'find',

						page: app.nowPage + 1,

						cid:app.val

					}, function (res) {

						for (var i = 0; i < res.data.data.length; i++) {

							// console.log(res.data.data[i])



							app.goodsList.push(res.data.data[i]);

						}

						app.nowPage++;

						app.loading = false;

					});

				}

			},



			search:function(){

				//获取商品数据



				$.post("/home/index/search",{'_token':'{{csrf_token()}}',class:'select',keyword:app.keyword},function (res) {



					if(res.code == 1){

						app.goodsList = res.data.data



						if (res.data.length > 3) {

							for (var i = 0; i < 3; i++) {

								var datas = {

									goods_thumb: '',

									gid: 0

								};

								datas.goods_thumb = app.goodsList[i].goods_thumb;

								datas.gid = app.goodsList[0].id;

								app.rotation.push(datas);

							}

						}else{

							for (var i = 0; i < res.data.length; i++) {

								var datas = {

									goods_thumb: '',

									gid: 0

								};

								datas.goods_thumb = app.goodsList[i].goods_thumb;

								datas.gid = app.goodsList[0].id;

								app.rotation.push(datas);

							}

						}



					} else {



						layer.msg(res.data);



					}



				});



			},



			//跳转

			classGood:function(val){

				//$("#d1").scrollTop(100);

				$('html,body').animate({'scrollTop':680},600);

				$.post("/home/index/getShopGoods",{'_token':'{{csrf_token()}}',id:val},function (res) {

					if(res.code == 1){

						app.goodsList = res.data;

					} else if(res.code == 0) {

						layer.msg(res.data);

					}

				});

			}

			,

			classGood1:function(val){

				// $.post("/home/index/classify",{'_token':'{{csrf_token()}}',class:'find',cid:val},function (res) {

				//     if(res.code == 1){

				// 		app.goodsList = res.data.data;

				// 		app.page = res.data.last_page;

				// 		app.nowPage = res.data.current_page;

				// 		app.val = val;

				//     } else if(res.code == 0) {

				//         layer.msg(res.data);

				//     }



				// });

				window.location.href="http://hb.baoliy168.com/shop/index/case"

			}

			,

			jump:function (id) {



				window.location.href="/home/microShop/productmicro?id="+id;

			},

			jump1:function (id) {



				window.location.href="/home/excellent/product?id="+id+"&aa="+1;

			},

			fjump1:function () {

				window.location.href="/home/microShop/index"

			},

			fjump2:function () {

				window.location.href="/home/index/resale_goods?cid=3"

			},
			jumpf:function () {

				window.location.href="/home/index/fu_index?cid=3"

			},


			// jump1:function(){

			// 	window.location.href="/home/excellent/product?id="+id;

			// },

			jump2:function(){

				window.location.href="/home/index/tuike";

			},

			jump3:function(){

				window.location.href="/home/index/sort_detail?cid=1";

			},
			jump33:function (){
				window.location.href="/home/index/supply";
			},
			jump4:function(){

				window.location.href="/home/index/special?cid=7";

			},

			jump5:function(){

				window.location.href="/home/index/case";

			},



			//获取url id



			obtain:function (val) {



				var query = window.location.search.substring(1);



				var vars = query.split("&");



				for (var i=0;i<vars.length;i++) {



					var pair = vars[i].split("=");



					if(pair[0] == val){



						return pair[1];



					}



				}



			},



		},



		//自动执行



		mounted: function () {



			this.initialize();

			// this.classify1();

			this.imglist();



		},



	})



	//添加滚动事件

	window.onload = function () {

		window.addEventListener('scroll', app.handleScroll)

	}

	//滚动条到底部的距离

	function getScrollBottomHeight() {

		return getPageHeight() - getScrollTop() - getWindowHeight();



	}

	//页面高度

	function getPageHeight() {

		return document.querySelector("html").scrollHeight

	}

	//滚动条顶 高度

	function getScrollTop() {

		var scrollTop = 0,

				bodyScrollTop = 0,

				documentScrollTop = 0;

		if (document.body) {

			bodyScrollTop = document.body.scrollTop;

		}

		if (document.documentElement) {

			documentScrollTop = document.documentElement.scrollTop;

		}

		scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;

		return scrollTop;

	}



	function getWindowHeight() {

		var windowHeight = 0;

		if (document.compatMode == "CSS1Compat") {

			windowHeight = document.documentElement.clientHeight;

		} else {

			windowHeight = document.body.clientHeight;

		}

		return windowHeight;

	}



</script>



</html>



